<template>
  <div v-loading.fullscreen="loading">
    <el-row :gutter="10">
      <el-col
        :span="1"
        style="text-align:left"
      >
        <el-button
          type="success"
          @click="addBtnClick"
        >添加</el-button>
      </el-col>
    </el-row>

    <el-dialog
      v-model="dialogDatas.dialogFormVisible"
      :title="dialogDatas.isNew ? '添加':'修改'"
      top="5vh"
      width="90vw"
      destroy-on-close
    >
      <el-scrollbar max-height="70vh">
        <el-form :model="dialogDatas.currentData">
          <el-form-item
            v-for="item in dialogDatas.formItems"
            :label="item.label"
          >
            <el-date-picker
              v-if="item.isDate"
              v-model="dialogDatas.currentData[item.value]"
              :type="item.dateOption ? item.dateOption.type : 'date'"
              :format="item.dateOption ? item.dateOption.format : 'YYYY/MM/DD'"
              :value-format="item.dateOption ? item.dateOption.valueFormat : 'YYYY/MM/DD'"
              :date-format="item.dateOption ? item.dateOption.dateFormat : ''"
              :time-format="item.dateOption ? item.dateOption.timeFormat : ''"
            />
            <el-switch
              v-else-if="item.isSwitch"
              v-model="dialogDatas.currentData[item.value]"
              inline-prompt
              :disabled="item.disabled"
              :active-text="item.trueText"
              :inactive-text="item.falseText"
              :active-value="item.trueValue"
              :inactive-value="item.falseValue"
              :style="{'--el-switch-on-color': item.trueColor , '--el-switch-off-color':item.falseColor }"
              size="large"
            />

            <el-select
              v-else-if="item.isSelect"
              v-model="dialogDatas.currentData['checkSelect']"
              @change="item.selectChanged"
              :disabled="item.disabled"
              filterable
              clearable
            >
              <el-option
                v-for="opitem in dialogDatas.formOptions[item.selectOptionsName]"
                :key="opitem.value"
                :label="opitem.label"
                :value="opitem.value"
              />
            </el-select>

            <el-select
              v-else-if="item.isOption"
              v-model="dialogDatas.currentData[item.value]"
              filterable
              clearable
            >
              <el-option
                v-for="opitem in item.options"
                :key="opitem.value"
                :label="opitem.label"
                :value="opitem.value"
              />
            </el-select>

            <car-input-box
              v-else-if="item.isCar"
              :caridChanged="dialogDatas.caridChanged"
              :carid="dialogDatas.currentData.CARID"
            >
            </car-input-box>

            <el-input
              v-else
              v-model="dialogDatas.currentData[item.value]"
              :disabled="(item.value == 'SP_USERID' && !dialogDatas.isNew) || item.disabled"
            />
          </el-form-item>
        </el-form>
      </el-scrollbar>

      <template #footer>
        <span>
          <el-button @click="dialogDatas.dialogFormVisible = false">取消</el-button>
          <el-button
            type="primary"
            @click="dialogDatas.confirmBtnClick"
          >
            确定
          </el-button>
        </span>
      </template>
    </el-dialog>

    <el-table
      class="marginTop10"
      :data="tableDatas.tableDatasAfterPage"
      stripe
      border
      empty-text="无数据"
    >
      <el-table-column
        v-for="column in tableDatas.tableColumns"
        :prop="column.prop"
        :label="column.label"
        :align="column.align"
        :width="column.width"
      >
        <template
          #default="scope"
          v-if="column.prop =='operate'"
        >
          <div>
            <el-button
              type="success"
              v-if="scope.row.STATE == '4'"
              @click="tableDatas.editBtnClick(scope.row)"
            >修改车牌</el-button>
            <!-- <el-popconfirm
              confirm-button-text="确定"
              cancel-button-text="取消"
              title="确定删除该条记录?"
              @confirm="tableDatas.deleteBtnClick(scope.row)"
            >
              <template #reference>
                <el-button type="danger">删除</el-button>
              </template>
            </el-popconfirm> -->
          </div>
        </template>

        <template
          #default="scope"
          v-else-if="column.prop =='STATE'"
        >
          <el-popover
            placement="bottom"
            title="状态"
            :width="200"
            trigger="click"
          >
            <template #reference>
              <div>
                <el-tag
                  v-if="scope.row.STATE == '-1'"
                  type="danger"
                  size="large"
                >审批未通过</el-tag>
                <el-tag
                  v-if="['0','1','2','3'].includes(scope.row.STATE)"
                  type="primary"
                  size="large"
                >审批中<br>(点击查看)</el-tag>
                <el-tag
                  v-if="scope.row.STATE == '4'"
                  type="success"
                  size="large"
                >已录入</el-tag>
              </div>
            </template>
            <el-steps
              direction="vertical"
              :active="Number(scope.row['STATE'])+1"
              finish-status="success"
            >
              <el-step :title="scope.row['RETURN_RESULT'] ? (scope.row['RETURN_RESULT']+',请重新申请'):'已提交'" />
              <el-step :title="`一级审批(${scope.row['SP_USERID']})`" />
              <el-step :title="`二级审批(${scope.row['DATA1']})`" />
              <el-step :title="`三级审批(${scope.row['DATA2']})`" />
              <el-step title="已录入" />
            </el-steps>
          </el-popover>

        </template>

      </el-table-column>
    </el-table>

    <!-- {{dialogDatas.formOptions}} -->
    <!-- {{dialogDatas.formOptions.spListOption}} -->

    <!-- <el-pagination
      class="marginTop10"
      @size-change="tableDatas.filters.handleSizeChange"
      @current-change="tableDatas.filters.handleCurrentChange"
      :page-sizes="[10, 15, 20, 100]"
      :page-size="tableDatas.filters.pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="tableDatas.tableDatasAfterFilter.length"
    >
    </el-pagination> -->

    <el-row>
      <el-col :span="8">
        <el-image
          style="width:30vw;"
          :src="imgDatas.src1"
          :zoom-rate="1.2"
          :max-scale="7"
          :min-scale="0.2"
          :preview-src-list="imgDatas.srcList"
          :initial-index="0"
          fit="cover"
        />
      </el-col>

      <el-col :span="8">
        <el-image
          style="width:30vw;"
          :src="imgDatas.src2"
          :zoom-rate="1.2"
          :max-scale="7"
          :min-scale="0.2"
          :preview-src-list="imgDatas.srcList"
          :initial-index="1"
          fit="cover"
        />
      </el-col>

      <el-col :span="8">
        <el-image
          style="width:30vw;"
          :src="imgDatas.src3"
          :zoom-rate="1.2"
          :max-scale="7"
          :min-scale="0.2"
          :preview-src-list="imgDatas.srcList"
          :initial-index="2"
          fit="cover"
        />
      </el-col>
    </el-row>
  </div>
</template>
<script>
import { computed, reactive, ref } from 'vue';
import { onMounted, watch } from '@vue/runtime-core';

import { v4 } from 'uuid';
import { dayjs } from 'element-plus';
import VueCookie from 'vue-cookie';
import store from '@/store';

import myAxios from '@/myAxios/myAxios';
import { showWarning } from '@/hooks/useMyMessageBox';
import CarInputBoxVue from '@/components/CarInputBox.vue';
import myAxios28 from '@/myAxios/myAxios28';

import waibaoPng from '@/assets/waibao.png';
import waibufangkePng from '@/assets/waibufangke.png';
import waibufangkejituanneibuPng from '@/assets/waibufangkejituanneibu.png';

export default {
  name: 'MyCarsView',
  components: {
    CarInputBox: CarInputBoxVue
  },
  setup () {
    let loading = ref(false);
    let addBtnClick = function () {
      let length = tableDatas.tableDatasAfterPage.filter(el => [-2, 0, 1, 2, 3, 4].includes(el.STATE)).length;
      if (length >= 2) {
        showWarning('个人车辆最多2辆,如需更换车牌请点击修改车牌按钮');
      }
      else {
        showFormDialog();
      }
    };

    let showFormDialog = function (row) {
      if (row) {
        dialogDatas.isNew = false;
        dialogDatas.currentData = { ...row };

        let checkSelect = VueCookie.get('checkSelect');
        // console.log('checkSelect :>> ', checkSelect);
        dialogDatas.currentData.checkSelect = checkSelect;

        let formItem = dialogDatas.formItems.find(item => {
          return item.value == 'SP_USERID';
        });
        formItem.disabled = true;
        formItem.selectChanged(checkSelect);
      }
      else {
        dialogDatas.isNew = true;
        let userid = VueCookie.get('userid');
        let username = VueCookie.get('username');
        let checkSelect = VueCookie.get('checkSelect');
        dialogDatas.currentData = {
          USERID: userid,
          USERNAME: username,
          checkSelect: checkSelect,

          DATA3: '蓝',
          REASON: '出勤',
        };

        let formItem = dialogDatas.formItems.find(item => {
          return item.value == 'SP_USERID';
        });
        formItem.disabled = true;
        formItem.selectChanged(dialogDatas.currentData.checkSelect);
      }
      dialogDatas.dialogFormVisible = true;
    };

    let dialogDatas = reactive({
      dialogFormVisible: false,
      currentData: {},
      isNew: false,
      formOptions: {
        spList: computed(() => {
          return store.state.spList;
        }),
        spListOption: computed(() => {
          let options = [];
          let spList = JSON.parse(JSON.stringify(store.state.spList)).filter(el => ['1'].includes(el.TYPE));

          for (let i = 0; i < spList.length; i++) {
            let sp_option = {
              DEPART: spList[i].DEPART,
              DEPART1: spList[i].DEPART1,
              SP_USERID: spList[i].USERID,
              SP_USERNAME: spList[i].USERNAME,
              DATA1: spList[i].DATA1,
              DATA1_USERNAME: spList[i].DATA2,
              DATA2: '0120',
              label: '',
              value: spList[i].QD_VISITOR_SP_ID,
            };
            sp_option.label = sp_option.DEPART + '-' + sp_option.DEPART1
              + '-' + sp_option.SP_USERID + '(' + sp_option.SP_USERNAME + ')' +
              '-' + sp_option.DATA1 + '(' + sp_option.DATA1_USERNAME + ')';
            options.push(sp_option);
          }
          console.log('options :>> ', options);
          return options;
        })
      },
      formItems: [
        // {
        //   "value": "APPLY_ID",
        //   "label": "ID",
        //   "isDate": false,
        // },
        // {
        //   "value": "USERID",
        //   "label": "申请人ID",
        //   "isDate": false,
        // },
        // {
        //   "value": "USERNAME",
        //   "label": "申请人姓名",
        //   "isDate": false,
        // },
        {
          "value": "SP_USERID",
          "label": "审批人",
          "isDate": false,
          "isSelect": true,
          "selectOptionsName": "spListOption",
          "selectChanged": function (val) {
            console.log('val :>> ', val);
            if (val) {
              let f_option = dialogDatas.formOptions['spListOption'].find(el => el.value == val);
              if (f_option) {
                dialogDatas.currentData['SP_USERID'] = f_option.SP_USERID;
                dialogDatas.currentData['SP_USERNAME'] = f_option.SP_USERNAME;
                dialogDatas.currentData['DATA1'] = f_option.DATA1 ? f_option.DATA1 : '0120';
                dialogDatas.currentData['DATA2'] = f_option.DATA2;
              }
            }
            else {
              dialogDatas.currentData['SP_USERID'] = '';
              dialogDatas.currentData['SP_USERNAME'] = '';
              dialogDatas.currentData['DATA1'] = '';
              dialogDatas.currentData['DATA2'] = '';
            }
          },
        },
        // {
        //   "value": "SP_USERNAME",
        //   "label": "审批人姓名",
        //   "isDate": false,
        // },
        // {
        //   "value": "TYPE",
        //   "label": "类型 0:内部审批 1 外部审批",
        //   "isDate": false,
        // },
        // {
        //   "value": "CREATETIME",
        //   "label": "创建时间",
        //   "isDate": false,
        // },
        // {
        //   "value": "PASSTIME",
        //   "label": "审批通过时间",
        //   "isDate": false,
        // },
        // {
        //   "value": "STATE",
        //   "label": "状态 0:待审批 1:审批通过 2:审批未通过",
        //   "isDate": false,
        // },
        {
          "value": "REASON",
          "label": "访问原因",
          "isDate": false,
        },
        // {
        //   "value": "PASSDATE",
        //   "label": "外部访客访问时间",
        //   "isDate": false,
        // },
        {
          "value": "CARID",
          "label": "车牌号",
          "isDate": false,
          "isCar": true,
        },
        // {
        //   "value": "DATA1",
        //   "label": "DATA1",
        //   "isDate": false,
        // },
        // {
        //   "value": "DATA2",
        //   "label": "DATA2",
        //   "isDate": false,
        // },
        {
          "value": "DATA3",
          "label": "车牌颜色",
          "isDate": false,
          "isSwitch": true,
          "disabled": true,
          "trueText": '蓝',
          "trueValue": '蓝',
          "trueColor": '#409EFF',
          "falseText": '绿',
          "falseValue": '绿',
          "falseColor": '#67C23A',
        },
        {
          "value": "DATA4",
          "label": "车辆颜色",
          "isDate": false,

          "isOption": true,
          "options": [
            {
              value: '白色',
              label: '白色',
            },
            {
              value: '灰(银)',
              label: '灰(银)',
            },
            {
              value: '银(灰)',
              label: '银(灰)',
            },
            {
              value: '黑色',
              label: '黑色',
            },
            {
              value: '红色',
              label: '红色',
            },
            {
              value: '深蓝',
              label: '深蓝',
            },
            {
              value: '蓝色',
              label: '蓝色',
            },
            {
              value: '黄色',
              label: '黄色',
            },
            {
              value: '绿色',
              label: '绿色',
            },
            {
              value: '棕色',
              label: '棕色',
            },
            {
              value: '粉色',
              label: '粉色',
            },
            {
              value: '紫色',
              label: '紫色',
            },
            {
              value: '其它',
              label: '其它',
            },
          ],
        },
        {
          "value": "DATA5",
          "label": "车辆品牌",
          "isDate": false,
        },
        {
          "value": "DATA6",
          "label": "手机号码",
          "isDate": false,
        },
        {
          "value": "DATA7",
          "label": "旧车牌",
          "isDate": false,
          "disabled": true,
        },
        // {
        //   "value": "DATA8",
        //   "label": "DATA8",
        //   "isDate": false,
        // },
        // {
        //   "value": "DATA9",
        //   "label": "DATA9",
        //   "isDate": false,
        // },
        // {
        //   "value": "DATA10",
        //   "label": "DATA10",
        //   "isDate": false,
        // },

      ],

      caridChanged: function (newCarid) {
        dialogDatas.currentData.CARID = newCarid;
        dialogDatas.currentData.DATA3 = newCarid.length == 7 ? '蓝' : '绿';
      },
      checkCurrentData: function () {
        let userid = dialogDatas.currentData.USERID ? dialogDatas.currentData.USERID : '';
        let sp_userid = dialogDatas.currentData.SP_USERID;
        let data1 = dialogDatas.currentData.DATA1;
        let carid = dialogDatas.currentData.CARID ? dialogDatas.currentData.CARID : '';
        // 车辆品牌
        let DATA5 = dialogDatas.currentData.DATA5;
        // 访问原因
        let REASON = dialogDatas.currentData.REASON;
        if (!userid) {
          showWarning('申请人工号不能为空');
          return false;
        }
        if (!sp_userid && !data1) {
          showWarning('审批人工号不能为空');
          return false;
        }
        if (!DATA5) {
          showWarning('车辆品牌不能为空');
          return false;
        }
        if (!REASON) {
          showWarning('访问原因不能为空');
          return false;
        }
        if (!carid) {
          showWarning('车牌号不能为空,车牌输入完毕后请点击绿色完成按钮后提交');
          return false;
        }
        else {
          if (store.state.onlineCars.includes(carid)) {
            showWarning('车牌号已存在，请重新输入车牌号');
            return false;
          }
        }
        return true;
      },
      confirmBtnClick: function () {
        let isPassCheck = dialogDatas.checkCurrentData();
        if (!isPassCheck) {
          return;
        }

        loading.value = true;

        let uuid = dialogDatas.currentData.APPLY_ID ? dialogDatas.currentData.APPLY_ID : v4();
        let userid = VueCookie.get('userid');
        let username = VueCookie.get('username');

        //如果没有一级审批人,用二级审批人当一级审批人
        let sp_userid = dialogDatas.currentData.SP_USERID ? dialogDatas.currentData.SP_USERID : dialogDatas.currentData.DATA1;
        let sp_username = dialogDatas.currentData.SP_USERNAME;
        let type = 0;
        let createtime = dialogDatas.currentData.CREATETIME ? dialogDatas.currentData.CREATETIME : dayjs().format('YYYY/MM/DD HH:mm:ss');
        let passtime = dialogDatas.currentData.PASSTIME ? dialogDatas.currentData.PASSTIME : '';
        let reason = '';
        let passdate = '';
        let carid = dialogDatas.currentData.CARID;
        //如果没有二级审批人,用一级审批人当二级审批人
        let data1 = dialogDatas.currentData.DATA1 ? dialogDatas.currentData.DATA1 : dialogDatas.currentData.SP_USERID;

        let data2 = dialogDatas.currentData.DATA2;
        let data3 = dialogDatas.currentData.DATA3;
        let data4 = dialogDatas.currentData.DATA4;
        let data5 = dialogDatas.currentData.DATA5;
        let data6 = dialogDatas.currentData.DATA6;
        let data7 = dialogDatas.currentData.DATA7;
        let data8 = '';
        let data9 = '';
        let data10 = '';
        let state = dialogDatas.getState(userid, sp_userid, data1, data2);

        let params = `${uuid}\t${userid}\t${username}\t${sp_userid}` +
          `\t${sp_username}\t${type}\t${createtime}\t${passtime}` +
          `\t${state}\t${reason}\t${passdate}\t${carid}` +
          `\t${data1}\t${data2}\t${data3}\t${data4}` +
          `\t${data5}\t${data6}\t${data7}\t${data8}` +
          `\t${data9}\t${data10}`;

        myAxios.post('陈帅廷添加或修改驱动访客系统记录', params).then(res => {
          if (res.includes('成功')) {
            loading.value = false;
            dialogDatas.dialogFormVisible = false;
            ElMessage({
              showClose: true,
              type: 'success',
              message: '提交成功!' + res
            });
            myAxios.postToWeChat(sp_userid, '审批申请', '您有新的车辆审批申请,点击前往(工作台->驱动DS->通用专区->车辆登记->车辆审批)', window.location.origin + window.location.pathname + '#/insideApply/checkCars');
            getTableDatas();
          }
          else {
            loading.value = false;
            showWarning('更新失败res!' + res);
          }
        }).catch((err) => {
          loading.value = false;
          showWarning('更新失败err!' + err);
        });

      },
      getState: function (userid, sp1, sp2, sp3) {
        if (userid != sp1) {
          return 0;
        }
        else if (userid != sp2) {
          return 1;
        }
        else if (userid != sp3) {
          return 2;
        }
        else if (userid == sp3) {
          return 3;
        }
      },
      cancelBtnClick: function () {

      }
    });

    let getTableDatas = function () {
      loading.value = true;

      let userid = VueCookie.get('userid');
      let params = `${userid}\t0`;
      console.log('userid :>> ', userid);
      myAxios.get('陈帅廷查询驱动访客系统内部车辆', params).then(async res => {
        if (res instanceof Array) {
          loading.value = false;
          tableDatas.oritableData = [...res];

          //根据直接主管锁定审批人
          let userInfoList = await myAxios.get('陈帅廷查询员工直接领导', userid);
          if (userInfoList.length) {
            let spObject = dialogDatas.formOptions.spListOption.find(item => {
              // 直接主管是一级审批人 或者 自己是一级审批人
              return item.SP_USERID == userInfoList[0]["REPORTTOBADGE"]
                || item.SP_USERID == userInfoList[0]["BADGE"];
            });
            if (spObject) {
              dialogDatas.currentData.checkSelect = spObject.value;

              VueCookie.set('checkSelect', spObject.value);
              if (spObject.value) {
                let formItem = dialogDatas.formItems.find(item => {
                  return item.value == 'SP_USERID';
                });
                formItem.disabled = true;
                formItem.selectChanged(dialogDatas.currentData.checkSelect);
              }
            }
            else {
              // showWarning('没有找到审批人！');
            }

          }
          // ElMessage({
          //   showClose: true,
          //   type: 'success',
          //   message: '最新数据获取成功!',
          // });
        }
        else {
          loading.value = false;
          showWarning('获取数据失败res!' + res);
        }
      }).catch((err) => {
        loading.value = false;
        showWarning('获取数据失败err!' + err);
      });
    };

    onMounted(() => {
      getTableDatas();
    });

    let tableDatas = reactive({
      //表格筛选展示相关代码
      filters: {

        //表格翻页相关代码
        currentPage: 1,
        pagesize: 10,
        handleSizeChange (val) {
          tableDatas.filters.pagesize = val;
        },
        handleCurrentChange (val) {
          tableDatas.filters.currentPage = val;
        },
      },
      tableDatasAfterFilter: computed(() => {
        let fData = tableDatas.oritableData;
        return fData;
      }),
      tableDatasAfterPage: computed(() => {
        let fData = tableDatas.tableDatasAfterFilter;
        fData = fData.slice((tableDatas.filters.currentPage - 1) * tableDatas.filters.pagesize, tableDatas.filters.currentPage * tableDatas.filters.pagesize);
        return fData;
      }),

      tableColumns: [
        // {
        //   "prop": "APPLY_ID",
        //   "label": "ID",
        //   "align": "center",
        // },
        {
          "prop": "USERID",
          "label": "申请人ID",
          "align": "center"
        },
        {
          "prop": "USERNAME",
          "label": "申请人姓名",
          "align": "center"
        },
        {
          "prop": "SP_USERID",
          "label": "一级审批人ID",
          "align": "center"
        },
        {
          "prop": "SP_USERNAME",
          "label": "审批人姓名",
          "align": "center"
        },
        // {
        //   "prop": "TYPE",
        //   "label": "类型 0:内部审批 1 外部审批",
        //   "align": "center",
        // },
        {
          "prop": "CREATETIME",
          "label": "创建时间",
          "align": "center"
        },
        // {
        //   "prop": "PASSTIME",
        //   "label": "审批通过时间",
        //   "align": "center"
        // },
        {
          "prop": "STATE",
          "label": "状态",
          "align": "center",
        },
        // {
        //   "prop": "REASON",
        //   "label": "访问原因",
        //   "align": "center",
        // },
        // {
        //   "prop": "PASSDATE",
        //   "label": "外部访客访问时间",
        //   "align": "center",
        // },
        {
          "prop": "CARID",
          "label": "车牌号",
          "align": "center"
        },
        {
          "prop": "DATA1",
          "label": "二级审批人",
          "align": "center",
        },
        // {
        //   "prop": "DATA2",
        //   "label": "DATA2",
        //   "align": "center",
        // },
        {
          "prop": "DATA3",
          "label": "车牌颜色",
          "align": "center",
        },
        {
          "prop": "DATA4",
          "label": "车辆颜色",
          "align": "center",
        },
        {
          "prop": "DATA5",
          "label": "车辆品牌",
          "align": "center",
        },
        {
          "prop": "DATA6",
          "label": "手机号码",
          "align": "center",
        },

        // {
        //   "prop": "DATA7",
        //   "label": "DATA7",
        //   "align": "center",
        // },
        // {
        //   "prop": "DATA8",
        //   "label": "DATA8",
        //   "align": "center",
        // },
        // {
        //   "prop": "DATA9",
        //   "label": "DATA9",
        //   "align": "center",
        // },
        // {
        //   "prop": "DATA10",
        //   "label": "DATA10",
        //   "align": "center",
        // },

        {
          "prop": "operate",
          "label": "操作",
          "align": "center",
          "width": 200,
        }
      ],
      oritableData: [],
      editBtnClick: function (row) {
        row.DATA7 = row.CARID;
        showFormDialog(row);
      },
      deleteBtnClick: function (row) {
        loading.value = true;

        let deleteState = row.STATE;
        // 如果是完成状态,状态设为-2,推送给汪工
        if (deleteState == 4) {
          deleteState = -2;
        }
        // 否则状态直接设为-3
        else {
          deleteState = -3;
        }
        let params = `${row.APPLY_ID}\t${deleteState}\t${row.PASSTIME}\t`;
        myAxios.post('陈帅廷更新驱动访客系统状态和通过时间', params).then(res => {
          if (res.includes('成功')) {
            loading.value = false;
            // dialogDatas.dialogFormVisible = false;
            ElMessage({
              showClose: true,
              type: 'success',
              message: '删除成功!' + res
            });
            tableDatas.oritableData.splice(tableDatas.oritableData.indexOf(row), 1);
          }
          else {
            loading.value = false;
            showWarning('删除失败res!' + res);
          }
        }).catch((err) => {
          loading.value = false;
          showWarning('删除失败err!' + err);
        });

      },
    });

    let imgDatas = reactive({
      src1: waibaoPng,
      src2: waibufangkePng,
      src3: waibufangkejituanneibuPng,

      srcList: [waibaoPng, waibufangkePng, waibufangkejituanneibuPng]
    });

    return {
      loading,
      addBtnClick,
      dialogDatas,
      tableDatas,
      imgDatas,
    };
  }
}
</script>
<style lang="css" scope>
.marginTop10 {
  margin-top: 10px;
}
</style>

